<template>
  <div
    id="device-tree"
    class="dtree-wrap"
    :class="
      (!showTabs ? 'deviceTree' : '')
    "
  >
    <div class="ctl-box" v-show="showTabs">
      <bs-add-icon
        class="hover-effect"
        @click.native="addTreeNode"
      ></bs-add-icon>
      <bs-remove-icon
        class="hover-effect"
        @click.native="removeTreeNode"
      ></bs-remove-icon>
      <bs-edit-icon
        class="hover-effect"
        @click.native="editTreeNode"
      ></bs-edit-icon>
      <bs-refresh-icon
        class="hover-effect shuaxin"
        @click.native="refreshTreeNode"
      ></bs-refresh-icon>
    </div>
    <div class="tree-box no-ctl">
      <bs-tree
        ref="asyncTree"
        :default-props="defaultProps"
        :default-checked-keys="defaultCheckedKeys"
        :default-expanded-keys="defaultExpandedKeys"
        :show-checkbox="false"
        :draggable="false"
        :filter-visible="false"
        :context-menu-visible="false"
        :context-menu-data="contextMenuData"
        :data="treeData"
        :highlight-current="true"
        @node-click="nodeClick"
      ></bs-tree>
    </div>
    <FolderDialog :visible.sync="showFolderDialog" :form="folderForm" @add="handleAddFolder"></FolderDialog>
  </div>
</template>
<script>
import NewsApi from '@/api/news.js'
import FolderDialog from './FolderDialog.vue'

export default {
  name: 'template_tree',
  data() {
    return {
      treeNodeData: {},
      defaultProps: {
        id: 'id',
        label: 'name',
        owner: 'owner',
        isLeaf: 'hasChild',
      },
      treeData: [],
      defaultTreeData: {},
      defaultCheckedKeys: [],
      defaultExpandedKeys: [0],
      contextMenuData: [],
      showFolderDialog: false,
      folderForm: {}
    }
  },
  props: {
    showTabs: {
      type: Boolean,
      default: true,
    },
    showMinType: {
      type: String,
      default: '1',
    }
  },
  components: { FolderDialog },
  mounted() {
    this.$nextTick(() => {
      this.loadTreeData()
    })
  },
  methods: {
    //终端分组树
    async loadTreeData() {
      let params = { type: this.showMinType }
      const res = await NewsApi.folderList(params)
      this.treeData = res || []
    },
    // 点击节点
    nodeClick(data, node, obj) {
      this.treeNodeData = data
      this.$emit('click', data)
    },
    // 添加节点
    addTreeNode() {
      this.folderForm = {
        id: 0,
        name: '',
        comment: ''
      }
      this.showFolderDialog = true
    },
    // 刷新树
    refreshTreeNode() {
      this.loadTreeData()
      this.$emit('refresh')
    },
    async handleAddFolder(form) {
      let res
      let parentId = 0
      if ( this.showMinType == '1' ) {
        const currNodeData = this.$refs.asyncTree.$refs.tree.getCurrentNode()
        if(currNodeData)
          parentId = currNodeData.id
      }
      if(form.id) {
        res = await NewsApi.editFolder({
          ...form,
          type: this.showMinType,
          parentId: parentId
        })
      } else {
        res = await NewsApi.addFolder({
          ...form,
          type: this.showMinType,
          parentId: parentId
        })
      }
      if(res && res.code == 200) {
        this.$message.success('操作成功')
        this.loadTreeData()
        this.treeNodeData = {}
        this.showFolderDialog = false
      }
    },
    // 编辑节点
    editTreeNode() {
      var arr = Object.keys(this.treeNodeData)
      if (arr.length === 0) {
        this.$alert('提示', '请选择一个目录')
        return
      }
      let editorForm = {}
      editorForm.id = this.treeNodeData.id
      editorForm.name = this.treeNodeData.name
      editorForm.comment = this.treeNodeData.comment
      this.folderForm = editorForm
      this.showFolderDialog = true
    },
    // 删除节点
    async removeTreeNode() {
      var arr = Object.keys(this.treeNodeData)
      if (arr.length === 0) {
        this.$alert('提示', '请选择一个目录')
        return
      }
      const bool = await this.$confirm('提示', '是否确认删除？')
      if (bool) {
        const selectTreeID = this.treeNodeData.id
        const params = { id: selectTreeID, type: this.showMinType }
        const res = await NewsApi.deleteFolder(params)
        if(res && res.code == 200) {
          this.$message.success('操作成功')
          this.treeNodeData = {}
          this.loadTreeData()
        }
      }
    },
    // 点击tab页
    doClickTree(treeItem) {
      this.treeNodeData = treeItem
    },
  },
}
</script>

<style lang="scss" scoped>
.deviceTree {
  width: 100%;
  .el-tabs--border-card {
    border: 0 !important;
  }
  ::v-deep .el-tabs--border-card .el-tabs__content {
    padding: 0;
  }
}
.ctl-box {
  line-height: 1.15;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid $bg-dc;
  padding: 12px 0 12px 0;
  margin: 0;
}
.dtree-wrap {
  ::v-deep .el-tabs__item {
    padding: 0 !important;
    width: 125px;
    text-align: center;
  }
  ::v-deep .el-tabs__item:last-child {
    border-right: 0 !important;
  }
}
.tree-box {
  width: 248px;
  height: calc(100vh - 200px);
  overflow: auto;

  .tree {
    height: 100%;
    ::v-deep .el-tree {
      min-width: 100%;
      display: inline-block !important;
    }
  }

  &.no-ctl {
    height: calc(100vh - 150px);
    .tree {
      height: 100%;
      ::v-deep .el-tree {
        min-width: 100%;
        display: inline-block !important;
      }
    }
  }
}
</style>